<template>
<div v-show="disPlayFlag">
    <div class="">
        <div slot="header" class="clearfix job-tab-header">
            <span>设置岗位角色</span>
        </div>
        <div class="job-tab-tran">
          <!-- <transfer-basic v-model="selectedArray" @doSave="doSave" :titles="['待选择', '已选择']" :button-texts="['', '', '保 存']" :data="transferdata">
          </transfer-basic> -->
          <template>
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入关键字"
              v-model="value2"
              :data="data2">
            </el-transfer>
          </template>
        </div>
    </div>
</div>
</template>

<script>
import {
  batchInsertItem,
  compositeSelect,
  batchDeleteItem,
  compositeSelectSysRole
} from '@/api/systemManage/tabPaneJobRole'
import TransferBasic from '@/components/common/transfer'

export default {
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    groupId: {
      type: String,
      default: ''
    }
  },
  components: {
    TransferBasic
  },
  mixins: [TransferBasic],
  data() {
    return {
      transferdata: [],
      selectedArray: [],
      oldSelectedArray: []
    }
  },
  filters: {

  },
  mounted() {
    this.initData()
  },
  created() {

  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.initData()
        }
      },
      immediate: true
    }
  },
  methods: {
    initData() {
      this.transferdata = []
      this.selectedArray = []
      const that = this
      const searchCon = {
        fields: [
          'roleid',
          'rolename'
        ]
      }
      compositeSelectSysRole(searchCon).then(response => {
        if (response.data.data.count > 0) {
          const records = response.data.data.records
          for (const item of records) {
            const input = {}
            input.key = item.roleid
            input.label = item.rolename
            that.transferdata.push(input)
          }
        }
      })

      const searchCon2 = {
        condition: {
          groupId: {
            property: 'groupId',
            value: this.groupId,
            type: 'EQ'
          }
        },
        fields: [
          'roleIdSysRoleRoleid',
          'roleIdSysRoleRolename'
        ]
      }
      compositeSelect(searchCon2).then(response => {
        if (response.data.data.count > 0) {
          const records = response.data.data.records
          for (const item of records) {
            that.selectedArray.push(item.roleIdSysRoleRoleid)
            that.oldSelectedArray.push(item.roleIdSysRoleRoleid)
          }
          console.log(that.selectedArray)
        }
      })
    },
    doSave() {
      console.log(this.groupId)
      if (this.groupId) {
        const deleteArray = []
        for (const item of this.oldSelectedArray) {
          const input = {}
          input.groupId = this.groupId
          input.roleId = item
          deleteArray.push(input)
        }
        batchDeleteItem(deleteArray)

        const insertArray = []
        for (const item of this.selectedArray) {
          const input = {}
          input.groupId = this.groupId
          input.roleId = item
          insertArray.push(input)
        }
        batchInsertItem(insertArray).then(response => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.initData()
        })
      } else {
        this.$notify({
          title: '警告',
          message: '请先新建岗位',
          type: 'warning',
          duration: 2000
        })
      }
    }
  }
}
</script>
